<template>
  <v-chart :autoresize="true" :manual-update="true" class='chart' theme="shine"
           ref="chart"/>
</template>

<script lang="ts">
import {
  defineComponent, onMounted, reactive, ref,
} from 'vue';
import dayjs from 'dayjs';
import { paymentStatistics } from '@/api/dataScreen';

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list: any = [];
    }());

    const chart = ref();

    const option = {
      title: {
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        // formatter: '{b} : {c} ({d}%)',
        // position: function (p) { //其中p为当前鼠标的位置
        //   return [p[0] + 10, p[1] - 10];
        // },
        formatter(params) {
          return `${params.name}: ${params.value} (${params.percent}%)<br/>收款金额: ${params.data.money} 元`;
        },
      },
      legend: {
        bottom: '25%',
        type: 'scroll',
        orient: 'vertical',
        left: '60%',
        textStyle: {
          color: '#fff',
          fontSize: '0.65rem',
        },
      },
      // grid: {
      //   // left: '3%',
      //   // right: '4%',
      //   bottom: '40%',
      //   containLabel: true
      // },
      series: [
        {
          type: 'pie',
          radius: '55%',
          center: ['30%', '35%'],
          label: {
            show: false,
            color: '#fff',
          },
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 1,
          },
          // emphasis: {
          //   itemStyle: {
          //     shadowBlur: 10,
          //     shadowOffsetX: 0,
          //     shadowColor: 'rgba(0, 0, 0, 0.5)'
          //   }
          // }
        },
      ],
    };

    async function getData(stationCode: number, searchDate: any) {
      const color = [];
      state.list = await paymentStatistics(stationCode, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      console.log(state.list);
      const seriesData = [] as any;
      state.list.sort((a, b) => b.笔数 - a.笔数);
      state.list.forEach((item, i) => {
        seriesData.push({
          value: item.笔数,
          name: `${item.收款方式.trim()}笔数`,
          money: item.实收金额,
          itemStyle: {
            color: color[i],
          },
        });
      });
      option.series[0].data = seriesData;
      chart.value.setOption(option);
      // console.log('list', state.list);
    }

    onMounted(() => {
    });

    return {
      state,
      chart,
      getData,
    };
  },
});
</script>

<style scoped>

</style>
